<template>
	<view>
		<view style="position: relative;">
			<timeLimit />
			<memberAdvantageTItle />
			<memberAdvantage />
			<view v-if="pingguo_xian">
				<view class="pingguo_xian_title" v-if="status==1"
					style="width: 100%;height: auto;box-sizing: border-box;padding:30rpx;background-color: #FFFFFF;border-radius: 20rpx;position: absolute;left:0 ;top:880rpx ;">
					<view style="width: 100%;">
						<view class="fs28 text-black pb12">选择套餐</view>
						<view @click="dianji(index)" v-for="(item,index) in list" :key='index'
							:class="payWayListSelectIndex==index?'active':'a'"
							style="width: 100%;border-radius: 20rpx;box-sizing: border-box;padding: 30rpx;position: relative;overflow: hidden;margin-bottom: 20rpx;">
							// <view style="line-height: 60rpx;color: #000000;font-size: 36rpx;text-align: center;">
								// VIP
								// </view>
							<image v-if="payWayListSelectIndex==index"
								src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220429/a50f82879bd4befbddcee45d0fdffe64.png"
								style="width: 34rpx;position: absolute;top: -4rpx;right: -4rpx;" mode="widthFix">
							</image>
							<!-- <view style="line-height: 80rpx;color: #FE5439;text-align: center;">
								<text style="font-size: 26rpx;">￥</text>
								<text style="font-size: 48rpx;font-weight: 600;">{{item.money}}</text>
							</view>
							<view style="width: 128rpx;height: 44rpx;line-height: 44rpx;text-align: center;background: #FFF0D8;border-radius: 10rpx;text-align: center;color: #A15210;font-size: 22rpx;margin: 10rpx auto;">
								{{item.name}}
							</view> -->
							<view>
								<view>
									<image
										src="https://static-1310167831.cos.ap-nanjing.myqcloud.com//uploads/20220711/7a583ac6465b7ee8994416d7e84c3aa4.png"
										style="width:60rpx;height: 80rpx;display: block;" mode=""></image>
								</view>
								<view style="color: #000000;font-size: 30rpx;line-height: 80rpx;font-weight: 600;">
									{{item.name || ''}}
								</view>
							</view>
							<view style="width: 46%;text-align: center;">
								<view style="line-height: 40rpx;color: #FE5439;">
									<text style="font-size: 26rpx;">￥</text><text
										style="font-size: 36rpx;font-weight: 600;">{{item.money}}</text>
								</view>
								<text
									style="line-height: 30rpx;background: #FFF0D8;border-radius: 10rpx;color: #A15210;font-size: 22rpx;display: inline-block;padding: 0 20rpx;">
									原价：{{item.old_money}}
								</text>
							</view>
						</view>
					</view>

					<view v-if="pingguo_xian" @click="kaitong"
						style="width: 90%;margin: 60rpx auto 30rpx;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 45rpx;background-color: #1fb0ac;color: #FFFFFF;font-size: 28rpx;">
						立即开通
					</view>
					<view v-if="pingguo_xian" class="moren">
						<label @click="ismoren">
							<checkbox :checked="default1==1?true:false" style="transform:scale(0.7);color: #1fb0ac;" />
							<text>阅读并同意</text>
						</label>
						<text @click="rzxz" style="color: #1fb0ac;opacity: 0.5;">⟪会员须知⟫</text>
					</view>
				</view>
				<view v-if="status==2"
					style="width: 100%;height: auto;box-sizing: border-box;padding:30rpx;background-color: #F8F8F8;border-radius: 20rpx;position: absolute;left:0 ;top:780rpx ;">
					<view style="width: 100%;">
						<view class="fs28 text-black select-title">选择套餐</view>
						<view class="flex justify-between" @click="dianji(index)" v-for="(item,index) in list"
							:key='index' :class="payWayListSelectIndex==index?'select-member-active':'a'"
							style="width: 100%;border-radius: 20rpx;box-sizing: border-box;padding: 8rpx 12rpx 32rpx 20rpx;position: relative;overflow: hidden;margin-bottom: 18rpx;">
							<!-- <view style="line-height: 60rpx;color: #000000;font-size: 36rpx;text-align: center;">
								VIP
							</view> -->
							<!-- <image v-if="payWayListSelectIndex==index" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220429/a50f82879bd4befbddcee45d0fdffe64.png" />style="width: 34rpx;position: absolute;top: -4rpx;right: -4rpx;" mode="widthFix"></image>-->
							<!-- <view style="line-height: 80rpx;color: #FE5439;text-align: center;">
								<text style="font-size: 26rpx;">￥</text>
								<text style="font-size: 48rpx;font-weight: 600;">{{item.money}}</text>
							</view>
							<view style="width: 128rpx;height: 44rpx;line-height: 44rpx;text-align: center;background: #FFF0D8;border-radius: 10rpx;text-align: center;color: #A15210;font-size: 22rpx;margin: 10rpx auto;">
								{{item.name}}
							</view> -->
							<view>
								<view style="">
									<image src="../../static/member/vip.png"
										style="width:48rpx;height: 48rpx;display: block;" mode=""></image>
								</view>
								<view
									style="color: #E78F29;font-size: 28rpx;line-height: 32rpx;font-weight: 600;margin-top: 7rpx">
									{{item.name || ''}}
								</view>
							</view>
							<view style="width: 46%;text-align: right;">
								<text
									style="line-height: 30rpx;border-radius: 10rpx;color: #9B9C9E;font-size: 22rpx;display: inline-block;padding: 0 20rpx;text-decoration: line-through;">
									￥{{item.old_money}}
								</text>
								<view style="line-height: 40rpx;color: #E78F29;margin-top: 20rpx" class="pr20">
									<text style="font-size: 26rpx;">￥</text><text
										style="font-size: 36rpx;font-weight: 600;">{{item.money}}</text>
								</view>
							</view>
						</view>
					</view>
					<payWay v-model="payWay" ref="payWay" :payWayList="payWayList"></payWay>
					<view class="bg-white pt30 mt30 rounded-20">
						<view v-if="pingguo_xian" class="moren">
							<label @click="ismoren">
								<checkbox type="circle" :checked="default1==1?true:false"
									style="transform:scale(0.7);color: #1fb0ac;" />
								<text class="text-666">我已阅读并同意懂鲜平台的</text>
							</label>
							<text @click="rzxz" style="color: #262D2C;">《懂鲜会员协议》</text>
						</view>
						<confirmPay @toPay="toPay"
							:payMoney="(list[payWayListSelectIndex] && list[payWayListSelectIndex].money) || ''" />
						<view v-if="pingguo_xian && false" @click="kaitong"
							style="width: 90%;margin: 60rpx auto 30rpx;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 45rpx;background-color: #1fb0ac;color: #FFFFFF;font-size: 28rpx;">
							立即开通
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup id="popup" ref="popup" :type="type_a" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					会员须知
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;margin-bottom: 20rpx;">
					<view style="line-height: 50rpx;color: #606266;font-size: 24rpx;" v-html="rule">

					</view>
				</scroll-view>
				<view @click="guan"
					style="width: 100%;height: 80rpx;line-height: 80rpx;background-color: #1fb0ac;border-radius: 40rpx;color: #FFFFFF;font-size: 30rpx;text-align: center;">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import timeLimit from '../components/member/timeLimit.vue'
	import memberAdvantageTItle from '../components/member/memberAdvantageTItle.vue'
	import memberAdvantage from '../components/member/memberAdvantage.vue'
	import confirmPay from '../components/member/confirmPay.vue'
	import {
		baseUrl
	} from '../../common/setting.js'
	export default {
		components: {
			timeLimit,
			memberAdvantageTItle,
			memberAdvantage,
			confirmPay
		},
		data() {
			return {
				// 接口：vip_pay，refresh_pay，top_pay，voice_pay
				// 加参数
				// is_app：1=是app，其他或不传=小程序
				// type：支付类型: 3=汇付支付宝,4=汇付微信,5=汇付银联
				payWayList: [{
						imgUrl: require('@/static/member/pay_ali.png'),
						typeNum: 3,
						'payUrl': 'url',
						'open': true,
						type: 'alipay',
						name: '支付宝',
						icon: 'alipay',
						id: 1
					},
					{
						imgUrl: require('@/static/member/pay_wechat.png'),
						typeNum: 7,
						'payUrl': 'url',
						'open': true,
						type: 'wechatPay',
						name: '微信',
						icon: 'wechat',
						id: 2
					},
					// {imgUrl:require('@/static/member/pay_union.png'),typeNum:5,'payUrl':'url','open':false,type: 'unionPay', name: '云闪付', icon: 'unionPay',id: 3},
					{
						imgUrl: require('@/static/member/pay_quick.png'),
						typeNum: 6,
						'payUrl': 'url',
						'open': true,
						type: 'pastPay',
						name: '快捷支付',
						icon: 'pastPay',
						id: 4
					},
				],
				status: 2,
				default1: 1,
				list: [],
				payWayListSelectIndex: 0,
				type_a: 'center',
				quanyi: [],
				rule: '',
				quanyi1: '',
				quanyi2: '',
				pingguo_xian: true,
				isVip: 0,
				payWay: 'alipay'
			}
		},
		onLoad(option) {
			console.log('%c [ option ]-213', 'font-size:13px; background:pink; color:#bf2c9f;', option)
			// this.quanyi=this.quanyi1
			this.isVip = option.is_vip
			if (+this.isVip === 1) {
				uni.setNavigationBarTitle({
					title: '续费'
				})
			} else if (+this.isVip === 0) {
				uni.setNavigationBarTitle({
					title: '开通会员'
				})
			}
			this.vipPriceList()
			this.pingguo()
			this.huiyuan1()
			this.huiyuan2()
			this.qiandao()
		},
		onShow() {
			// # ifdef APP-PLUS
			let str =
				'dongfresh://pages/index/wode?paySuccess=2backfromalipay?errcode=9000&req_seq_id=vip-2024092623081356&errmsg=&trans_amt=0.01&source=app'
				console.log('%c [ params ]-235', 'font-size:13px; background:pink; color:#bf2c9f;', params)
			const args = plus.runtime.arguments
			console.log('%c [ plus.runtime ]-242', 'font-size:13px; background:pink; color:#bf2c9f;', plus.runtime)
			// 当从第三方进入此页面时，plus.runtime.arguments 会携带参数， 在APP端 路由跳转进入此页面时， 会拿到 空字符串
			console.log('%c [ args ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', args)
			if (args !== '') {
				let length = args.indexOf('paySuccess=')
				let length2 = args.indexOf('backfromalipay')
				console.log('%c [ length ]-192', 'font-size:13px; background:pink; color:#bf2c9f;', length)
				console.log('%c [ length2 ]-194', 'font-size:13px; background:pink; color:#bf2c9f;', length2)
				let payStatus = args.slice(length, length2)
				console.log('%c [ payStatus ]-196', 'font-size:13px; background:pink; color:#bf2c9f;', payStatus)
				// ... 拿到小程序返回APP的参数 做一些事情...
				if (payStatus === 'paySuccess=2') {
					console.log('%c [ args.type ]-191', 'font-size:13px; background:pink; color:#bf2c9f;', payStatus)
					uni.navigateBack({
						delta: 1,
					})
				}
				// 注意： 当你从微信小程序返回APP携带的参数存在 plus.runtime.arguments 里。但是它是只读的
				// 会出现一个严重的问题， 当你再次进入此页面时， plus.runtime.arguments 里的参数不会清空！！ 会一直存在，除非后台关闭APP，重新打开APP
				// 官方也没有明确的解决办法
				// 可以通过以下方法清空
				plus.runtime.arguments = null
				plus.runtime.arguments = ''
			}
			// # endif
		},
		methods: {

			qiandao: function() {
				this.post('api/index/site', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.rule = res.data.hyxy
					}
				})
			},
			// 会员权益
			huiyuan1: function() {
				this.post('api/client/interests', {
					type: 1
				}, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.quanyi1 = res.data
					}
				})
			},
			huiyuan2: function() {
				this.post('api/client/interests', {
					type: 2
				}, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.quanyi2 = res.data
					}
				})
			},
			dibu: function(index) {
				this.status = index
				if (this.status == 1) {
					this.huiyuan()
				} else {
					this.huiyuan()
				}
			},
			ismoren() {
				if (this.default1 == 0) {
					this.default1 = 1
				} else {
					this.default1 = 0
				}
			},
			// 会员价格
			vipPriceList: function() {
				this.post('api/client/vip_list', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.list = [...res.data]
					}
				})
			},
			dianji: function(index) {
				this.payWayListSelectIndex = index
			},
			guan: function() {
				this.$refs.popup.close()
			},
			rzxz: function() {
				uni.navigateTo({
					url: '/subpages/pages/rzxz?type=' + 2
				})
				return
				this.$refs.popup.open()
			},
			async toPay() {
				let env = 1
				// #ifdef H5
				env = 1
				// #endif
				// #ifdef APP-PLUS || MP-WEIXIN
				env = 2
				// #endif
				let that = this
				if (this.default1 != 1) {
					uni.showToast({
						title: '请阅读并同意协议',
						duration: 1000,
						icon: 'none'
					});
					return
				} else {
					let isOpen = await this.$refs.payWay.validatePayWay()
					if (!isOpen) {
						return
					}
					if (env == 1) {
						// return uni.$u.toast('请在app中使用')
					}
					// 接口：vip_pay，refresh_pay，top_pay，voice_pay
					// 加参数
					// is_app：1=是app，其他或不传=小程序
					// type：支付类型: 3=汇付支付宝,4=汇付微信,5=汇付银联
					let payItem = this.payWayList.find(item => item.type === this.payWay)
					console.log('%c [ payItem ]-261', 'font-size:13px; background:pink; color:#bf2c9f;', payItem)
					let params = {
						// is_app: 1,
						type: payItem.typeNum,
						id: this.list[this.payWayListSelectIndex].id
					}

					console.log('%c [ params ]-280', 'font-size:13px; background:pink; color:#bf2c9f;', params)
					this.post('api/pay/vip_pay', params, true).then(res => {
						console.log('%c [ res ]-257', 'font-size:13px; background:pink; color:#bf2c9f;', res)
						// 3是支付宝支付
						if (params.type == 3) {
							//拼接支付宝内部功能，直接打开支付页面
							// linkurl = 'alipays://platformapi/startapp?saId=10000007&qrcode='+ {URL}
							let url =
								`alipays://platformapi/startapp?saId=10000007&qrcode=${encodeURI(res.data.qr_code)}?_s=web-other`;
							console.log('%c [ url ]-292', 'font-size:13px; background:pink; color:#bf2c9f;',
								url)
							let platform = uni.getSystemInfoSync().platform; //获取平台判断
							if (platform == 'android') {
								// plus.runtime.openWeb (res.data.qr_code)
								plus.runtime.openURL(res.data.jump_url)
							} else if (platform == 'ios') {
								console.log('%c [ platform ]-297',
									'font-size:13px; background:pink; color:#bf2c9f;', platform)
								console.log('%c [ res.data.jump_url ]-299',
									'font-size:13px; background:pink; color:#bf2c9f;', res.data.jump_url)
								// plus.runtime.openURL(res.data.jump_url)
								plus.runtime.launchApplication({
									action: res.data.jump_url
								})
							}

							// plus.runtime.openURL(res.data.qr_code, function(error) {
							// 	console.log('%c [ error ]-206', 'font-size:13px; background:pink; color:#bf2c9f;', error)
							// 	// console.error('打开支付宝失败: ' + error.message);
							// 	// 处理打开支付宝失败的情况，比如提示用户或者跳转到其他支付方式
							// })

						} else if (params.type == 4) {
							uni.navigateToMiniProgram({
								appId: "wx15627384ca1dfbb3", //微信小程序id
								path: "pages/index/index", // 不填默认首页
								extraData: {
									'data1': 'test'
								}, //传递给页面的参数
								success(res) {
									console.log("跳转成功");
								},
								fail(res) {
									console.log(res, "调用失败");
								}
							})
						} else if (params.type == 5) {
							uni.navigateTo({
								url: '/subpages/pages/confirmPay?type=union&payUrl=' + res.data.pay_url
							})
						} else if (params.type == 6) { //快捷支付
							console.log('%c [ res.data.data ]-319',
								'font-size:13px; background:pink; color:#bf2c9f;', res.data.data)
							plus.runtime.openURL(res.data.data.form_url, function(error) {
								console.log('%c [ error ]-206',
									'font-size:13px; background:pink; color:#bf2c9f;', error)
								// console.error('打开支付宝失败: ' + error.message);
								// 处理打开支付宝失败的情况，比如提示用户或者跳转到其他支付方式
							})
						} else if (payItem.typeNum == 7) {
							this.toPayWechat(res.data)
							return
						}
						// uni.navigateBack({
						// 	delta: 1 // 返回上 1 页
						// })
						return
						console.log(res)
						if (res.code == 1) {
							uni.getSystemInfo({
								success: function(res) {
									let str = res.model
									console.log(str.indexOf("iPhone") != -1); // true
									// that.post('api/index/wechat_check','',true).then(re=>{
									// 	if(str.indexOf("iPhone") != -1){
									// 		if(re.data==1){
									// 			that.fukuan(res)
									// 		}else{
									// 			uni.showModal({
									// 			    title: '温馨提示',
									// 			    content: '由于相关规范，ios功能暂不可用！',
									// 			    success: function (res) {
									// 			        if (res.confirm) {

									// 			        } else if (res.cancel) {

									// 			        }
									// 			    }
									// 			});

									// 		}
									// 	}else{
									// 		that.fukuan(ress)
									// 	}
									// })

								}
							});

						}
					})
				}
			},
			toPayWechat(data) {
				console.log('%c [ data ]-405', 'font-size:13px; background:pink; color:#bf2c9f;', data)
				console.log('%c [ JSON.parse(data) ]-409', 'font-size:13px; background:pink; color:#bf2c9f;', JSON.parse(
					data))
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: JSON.parse(data), //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						uni.navigateBack({
							delta: 1
						})
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// uni.navigateToMiniProgram({
				// 	appId:"wx15627384ca1dfbb3",//微信小程序id
				// 	path: "pages/index/index", // 不填默认首页
				// 	extraData:{
				// 				'data1': 'test'
				// 	}, //传递给页面的参数
				// 	success(res) {
				// 	console.log("跳转成功");
				// 	},
				// 	fail(res) {
				// 	console.log(res, "调用失败");
				// 	}
				// })
				// uni.navigateToMiniProgram({
				// 	appId: 'wx15627384ca1dfbb3',
				// 	path: 'pages/index/index?id=123',
				// 	extraData: {
				// 		'data1': 'test'
				// 	},
				// 	success(res) {
				// 		// 打开成功
				// 	}
				// })
			},
			toPayWechat1() {
				console.log('%c [ toPayWechat ]-385', 'font-size:13px; background:pink; color:#bf2c9f;', 'toPayWechat')
				// uni.navigateToMiniProgram({
				// 	appId:"wx15627384ca1dfbb3",//微信小程序id
				// 	path: "pages/index/index", // 不填默认首页
				// 	extraData:{
				// 				'data1': 'test'
				// 	}, //传递给页面的参数
				// 	success(res) {
				// 	console.log("跳转成功");
				// 	},
				// 	fail(res) {
				// 	console.log(res, "调用失败");
				// 	}
				// })
				// uni.navigateToMiniProgram({
				// 	appId: 'wx15627384ca1dfbb3',
				// 	path: 'pages/index/index?id=123',
				// 	extraData: {
				// 		'data1': 'test'
				// 	},
				// 	success(res) {
				// 		// 打开成功
				// 	}
				// })
				let payData = {
					id: this.list[this.payWayListSelectIndex].id,
					type: 4,
					token: uni.getStorageSync('token'),
					baseUrl: baseUrl,
					payUrl: 'api/pay/vip_pay'
				}
				console.log('%c [ argument ]-411', 'font-size:13px; background:pink; color:#bf2c9f;', payData)
				plus.share.getServices(res => {
					let sweixin = null
					sweixin = res.find(i => i.id === 'weixin')
					console.log('%c [ sweixin ]-412', 'font-size:13px; background:pink; color:#bf2c9f;', sweixin)
					if (sweixin.nativeClient) {
						// 分享跳转到微信小程序
						const path = `/fenbao/pages/toPay/index?payData=${JSON.stringify(payData)}&id=4`
						const params = {
							id: "gh_9f2f7796dc1f", // 微信小程序原生id
							path, //    打开小程序的页面路径，不传默认跳转首页
							type: 2 //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						}
						console.log('%c [ params ]-415', 'font-size:13px; background:pink; color:#bf2c9f;', params)
						sweixin.launchMiniProgram(params)
					} else {
						uni.showToast({
							title: '请安装微信',
							icon: 'none'
						})
					}
				}, err => {
					console.log("分享失败") // 获取分享服务列表失败
				});
			},
			kaitong: function() {
				let that = this
				if (this.default1 != 1) {
					uni.showToast({
						title: '请阅读并同意协议',
						duration: 1000,
						icon: 'none'
					});
					return
				} else {
					// 接口：vip_pay，refresh_pay，top_pay，voice_pay
					// 加参数
					// is_app：1=是app，其他或不传=小程序
					// type：支付类型: 3=汇付支付宝,4=汇付微信,5=汇付银联
					this.post('api/pay/vip_pay', {
						id: this.list[this.payWayListSelectIndex].id
					}, true).then(ress => {
						console.log(ress)
						if (ress.code == 1) {
							uni.getSystemInfo({
								success: function(res) {
									let str = res.model
									console.log(str.indexOf("iPhone") != -1); // true
									that.post('api/index/wechat_check', '', true).then(re => {
										if (str.indexOf("iPhone") != -1) {
											if (re.data == 1) {
												that.fukuan(ress)
											} else {
												uni.showModal({
													title: '温馨提示',
													content: '由于相关规范，ios功能暂不可用！',
													success: function(res) {
														if (res.confirm) {

														} else if (res
															.cancel) {

														}
													}
												});

											}
										} else {
											that.fukuan(ress)
										}
									})

								}
							});

						}
					})
				}

			},
			pingguo: function() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let str = res.model
						console.log(str.indexOf("iPhone") != -1); // true
						that.post('api/index/wechat_check', '', true).then(re => {
							if (re.data == 1) {
								that.pingguo_xian = true
							} else {
								that.pingguo_xian = false
							}
							return
							if (str.indexOf("iPhone") != -1) {
								if (re.data == 1) {
									that.pingguo_xian = true
								} else {
									that.pingguo_xian = false
								}
							} else {
								that.pingguo_xian = true
							}
						})

					}
				});
			},
			fukuan: function(res) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon: "none",
							duration: 1000
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/wode'
							})
						}, 1500)
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							title: '支付取消',
							icon: "none",
							duration: 1000
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.t_active {
		color: #FEFEFE;
		font-size: 36rpx;
		font-weight: 600;
		opacity: 1;
	}

	.t_ac {
		color: #FEFEFE;
		font-size: 36rpx;
		font-weight: 600;
		opacity: 0.5;
	}

	page {
		background-color: #323137 !important;
		padding-bottom: 50rpx;
		font-family: Demibold;
	}

	.a {
		border: 1px solid #D7DBE4;
		border-radius: 10rpx;
	}

	.select-member-active {
		border: 1px solid #F8F8F8;
		background-color: #FFF6E7;
		// background: linear-gradient(to bottom, #F3E0BA, #EBB463);
	}

	.box>view {
		margin: 16rpx 0;
	}

	.box>view:nth-child(3n+2) {
		margin: 16rpx 5%;
	}

	.moren {
		// display: flex;
		padding: 0 30upx;

		text {
			font-size: 26upx;
			color: #666666;
		}

	}

	checkbox .wx-checkbox-input {
		// border-radius: 50%;
		/* 圆角 */
		width: 34rpx;
		/* 背景的宽 */
		height: 34rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 2rpx solid #1fb0ac;
		background: #1fb0ac;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 46rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 46rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 46rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	.select-title {
		padding-bottom: 24rpx;
	}

	uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		border-color: #1FB0AD;
		background-color: #1FB0AD;
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}
</style>
<style lang="scss">
	.moren /deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		color: #1FB0AD !important;
		border-color: rgb(200, 201, 204);
		background-color: #fff;
	}

	.moren /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border-radius: 50%;
		color: #fff !important;
		border-color: #1FB0AD;
		background-color: #1FB0AD;
	}
</style>